<template>
  <div class="title_page">
    <img v-if="xianshi" class="gaosi" :src="headimg" alt="">
    <div class="xia">
      <img class="touxiang" @click="dianji" :src="headimg" alt="" />
      <div :class="name" @click="dianji" v-text="user_name"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: "usertitle",
  data() {
    return {
      name: "user_name",
      user_name: "点击登录",
      waimai: "",
      xianshi: false,
      headimg: require("@/assets/IMG/icon-注册头像.png"),
    };
  },
  created() {
    if (localStorage.getItem("waimai") != undefined) {
      this.xianshi = true
      this.name = "user_name1"
      var id = JSON.parse(localStorage.getItem("waimai")).user_id;
      this.axios({
        method: "post",
        url: "http://localhost:3000/update_information",
        data: { select_user_id: id },
      })
        .then((res) => {
          console.log(res.data.data[0]);
          this.waimai = res.data.data[0];
          this.user_name = this.waimai.user_name
          this.headimg = this.waimai.user_headimg
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  methods: {
    dianji() {
      if (localStorage.getItem("waimai") != undefined) {
        this.$router.push("/information");
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style scoped>
.title_page {
  height: 220px;
  background-color: white;

}

.xia {
  /* display: flex; */
  position: fixed;
  top: 20px;
  width: 95%;
  margin: auto;
  padding-top: 20px;
  text-align: center;
  z-index: 111;
}

.touxiang {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.user_name {
  font-size: 22px;
  line-height: 50px;
  margin-left: 10px;
  /* color: white; */
}

.user_name1 {
  font-size: 22px;
  line-height: 50px;
  margin-left: 10px;
  color: white;
}

.gaosi {
  width: 100%;
  height: 220px;
  /* background-position: center; */
  filter: blur(5px);
}
</style>